<template>
    <common>
        <div class="ve_container">
            <el-card :body-style="{ background: 'rgba(0,0,0,0.15)' }">
                <el-button class="ve_submit" type="plain" style="float: right">
                    <router-link
                        :to="{ path: 'register' }"
                        style="text-decoration: none; color: inherit"
                        >登陆</router-link
                    >
                </el-button>
                <h1>wlcn服务端</h1>
                <transition name="el-fade-in-linear">
                    <el-form
                        :model="form"
                        :rules="rules"
                        v-show="!success"
                        class="ve_form"
                        ref="ref_form"
                        :inline="false"
                        @keyup.enter="onSubmit"
                    >
                        <el-form-item prop="zoneName">
                            <el-input
                                v-model.trim="zoneName"
                                placeholder="区域名称"
                            >
                                <template #prepend>
                                    <el-icon :size="20"><Avatar /></el-icon>
                                </template>
                            </el-input>
                        </el-form-item>
                        <!--                        <el-form-item prop="password">-->
                        <!--                            <el-input-->
                        <!--                                v-model.trim="password"-->
                        <!--                                show-password-->
                        <!--                                placeholder="密码"-->
                        <!--                            >-->
                        <!--                                <template #prepend>-->
                        <!--                                    <el-icon :size="20"><Key /></el-icon>-->
                        <!--                                </template>-->
                        <!--                            </el-input>-->
                        <!--                        </el-form-item>-->
                        <el-form-item>
                            <el-button
                                class="ve_submit"
                                type="primary"
                                @click="onSubmit"
                            >
                                创建个人空间
                            </el-button>
                        </el-form-item>
                    </el-form>
                </transition>
            </el-card>
        </div>
    </common>
</template>

<script setup>
import Common from "@/components/Common";
import { ref, reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
const rules = {
    zoneName: [{ required: true, message: "请输入区域名称", trigger: "blur" }],
    password: [{ required: true, message: "请输入密码", trigger: "blur" }],
};
const router = useRouter();
const form = reactive({
    zoneName: "",
    password: "",
});
const { zoneName } = toRefs(form);
const ref_form = ref(null);
const success = ref(false);
router.options.isAddDynamicMenuRoutes = false;

/**
 * 登录
 */
const onSubmit = () => {
    VE_API.system
        .createAndInitZone({
            zoneName: form.zoneName,
        })
        .then(async (res) => {
            const { code } = res;
            if (code === 0) {
                router.go(-1);
            }
        });
};
</script>

<style lang="scss" scoped>
.ve_container {
    position: absolute;
    z-index: 1;
    width: 400px;
    top: 50%;
    left: 100px;
    transform: translateY(-50%);
    transition: all 1s;
    min-height: 273px;
    text-align: center;
    h1 {
        font-size: 24px;
        transition: all 1s;
        font-weight: bold;
        margin-bottom: 36px;
    }
    .ve_form {
        .ve_submit {
            width: 100%;
        }
        :deep(.el-input-group__prepend) {
            padding: 0 10px;
        }
    }
}
.el-form-item {
    width: 100%;
}
</style>
